<template>
  <a-modal
    title="设置报工成员"
    :visible="show"
    @ok="handleOk"
    @cancel="handleCancel"
    width="800px"
    :maskClosable="false"
  >
    <div>
      <a-button @click="fetchList">刷新</a-button>
      <a-button @click="openContractAttachSelector">选择附件</a-button>
    </div>
    <a-table :columns="columns" :data-source="records" rowKey="id" bordered :pagination="false">
      <span slot="realNameRender" slot-scope="text, record">
        <div style="line-height: 2.5">
          <span class="userTag" v-for="(item, index) of record.userList" :key="index">
            {{ item.realName }}
            <span class="removeUserTag" @click="removeUser(record.index, item)"> x </span>
          </span>
          <a-tag class="userTag" @click="openUserSelector(record.index)"> ... </a-tag>
        </div>
      </span>
    </a-table>
    <UserSelector :show="showUserSelector" ref="userSelectorRef" @selected="selectUser" />
    <ContractAttachSelector
      :show="showContractAttachSelector"
      ref="contractAttachSelectorRef"
      :contractId="contractId"
      @selected="selectAttach"
    />
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import UserSelector from '@/views/workReport/role/UserSelector'
import ContractAttachSelector from '@/views/contract/ContractAttachSelector'
export default {
  components: {
    UserSelector,
    ContractAttachSelector,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    contractId: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      columns: [
        {
          title: '角色',
          dataIndex: 'roleName',
          key: 'roleName',
          width: '100px',
        },
        {
          title: '人员名单',
          dataIndex: 'realName',
          key: 'realName',
          scopedSlots: { customRender: 'realNameRender' },
        },
      ],
      records: [],
      urls: {
        list: '/workReport/role/list',
        createWorkReport: '/workReport/project/createWorkReport',
      },
      showUserSelector: false,
      rowIndex: 0,
      showContractAttachSelector: false,
      attachs: [],
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    init() {
      this.attachs = []
      this.fetchList()
    },
    fetchList() {
      let res = getAction(this.urls.list, {}).then((res) => {
        if (res.success) {
          this.records = res.result
          let rowIndex = 0
          this.records.forEach((record) => {
            record.index = rowIndex++
            this.defaultUser(record.index)
          })
        }
      })
    },
    /**
     * 表结构切换页码
     */
    openUserSelector(index) {
      this.rowIndex = index
      this.$refs.userSelectorRef.init()
      this.showUserSelector = true
    },
    selectUser(selection) {
      if (selection != null && selection.length > 0) {
        let userName = []
        let realName = []
        if (this.records[this.rowIndex].defaultUserName) {
          userName = this.records[this.rowIndex].defaultUserName.split(',')
          realName = this.records[this.rowIndex].defaultRealName.split(',')
        }
        for (let i = 0; i < selection.length; i++) {
          if (userName.indexOf(selection[i].username) <= -1) {
            userName.push(selection[i].username)
            realName.push(selection[i].realname)
          }
        }
        this.$set(this.records[this.rowIndex], 'defaultUserName', userName.join(','))
        this.$set(this.records[this.rowIndex], 'defaultRealName', realName.join(','))
        this.defaultUser(this.rowIndex)
      }
      this.showUserSelector = false
    },
    defaultUser(rowIndex) {
      let userList = []
      if (this.records[rowIndex].defaultUserName && this.records[rowIndex].defaultRealName) {
        let userName = this.records[rowIndex].defaultUserName.split(',')
        let realName = this.records[rowIndex].defaultRealName.split(',')
        for (let i = 0; i < userName.length; i++) {
          userList.push({ userName: userName[i], realName: realName[i] })
        }
      }
      this.$set(this.records[rowIndex], 'userList', userList)
    },
    removeUser(rowIndex, user) {
      debugger
      if (this.records[rowIndex].defaultUserName && this.records[rowIndex].defaultRealName) {
        let userName = this.records[rowIndex].defaultUserName.split(',')
        let realName = this.records[rowIndex].defaultRealName.split(',')
        if (userName.indexOf(user.userName) > -1) {
          userName.splice(userName.indexOf(user.userName), 1)
          realName.splice(realName.indexOf(user.realName), 1)
        }
        this.$set(this.records[rowIndex], 'defaultUserName', userName.join(','))
        this.$set(this.records[rowIndex], 'defaultRealName', realName.join(','))
      }
      this.defaultUser(rowIndex)
    },
    handleOk() {
      if (this.attachs.length <= 0) {
        return this.$messageWorkReport.warning('请至少选择一个附件')
      }
      let permissions = []
      this.records.forEach((record) => {
        let permission = {}
        permission.roleId = record.id
        permission.roleName = record.roleName
        permission.userName = record.defaultUserName
        permission.realName = record.defaultRealName
        permissions.push(permission)
      })
      let params = {}
      params.permissions = permissions
      params.contractId = this.contractId
      params.attachs = this.attachs
      postAction(this.urls.createWorkReport, params).then((res) => {
        if (res.success) {
          this.$messageWorkReport.success('生成报工任务成功')
        } else {
          this.$messageWorkReport.error(res.message)
        }
      })
      this.$emit('close')
    },
    handleCancel(e) {
      this.$emit('close')
    },
    openContractAttachSelector() {
      this.$refs.contractAttachSelectorRef.init()
      this.showContractAttachSelector = true
    },
    selectAttach(attachs) {
      this.attachs = attachs
      this.showContractAttachSelector = false
    },
  },
}
</script>

<style>
.userTag {
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid cyan;
  border-radius: 3px;
  line-height: 20px;
  display: inline-block;
}
.removeUserTag {
  margin-right: 0px;
  cursor: pointer;
}
</style> 